<template>
    <div class="check">
        <!-- 头部Table页 -->
        <Row type="flex" justify="space-around" class="code-row-bg">
            <Col span="24">
                <div class="tmpHeader">
                    <span
                        :class="{ active: typeStatus == item.value }"
                        @click="changeTab(item.value)"
                        v-for="(item, index) in tabList"
                        >{{ item.title }}
                    </span>
                </div>
            </Col>
        </Row>
        <div class="cueBox">
            <div class="icon">
                <img src="../../../assets/images/warning.png" alt="" />
            </div>
            <div class="cue">
                <span class="s1">帮助说明</span>
                <br />
                <span class="s2" v-if="typeStatus == 1"
                    >请在核酸检验有结果后上传到系统。可通过批量导入的方式上传，文件格式支持”xls、xlsx”，表单内容包括”样本编号、检测时间、检测机构、检验结果、检验报告地址“。</span
                >
                <!-- <span class="download" v-if="typeStatus == 1" @click="downloadResult"> 点击下载导入模板 </span> -->
                <span class="s2" v-if="typeStatus == 2">
                    1、请在此页面处理核验结果，也可通过批量导入的方式上传，文件格式支持”xls、xlsx”，表单内容包括”样本编号、核验结果（“核验通过”、“样本缺失”、“样本损坏”或“其他原因，核验失败”）、备注信息“
                    。
                </span>
                <!-- <span class="download" v-if="typeStatus == 2"  @click="downloadInformation">点击下载导入模板</span> -->
                <br v-if="typeStatus == 2" />
                <span class="s2" v-if="typeStatus == 2">
                    2、封箱编号和样本编号的对应关系为手动录入，如果因为现场人员操作失误导致样本放错箱子，可以暂不处理
                </span>
                <span class="s2" v-if="typeStatus == 3"
                    >核验失败的样本信息请及时反馈给平台，以便安排现场工作人员及时处理
                </span>
            </div>
        </div>
        <!-- 查询内容 -->
        <Row style="margin-top: 10px">
            <Col :xs="24">
                <div class="margin-up-down" v-if="typeStatus != 3">
                    <Select
                        v-model="info.taskId"
                        style="width: 130px"
                        clearable
                        placeholder="任务名称"
                    >
                        <Option
                            v-for="item in tasklist"
                            :value="item.id"
                            :key="item.id"
                            style="text-align: center"
                            >{{ item.taskName }}</Option
                        >
                    </Select>
                </div>
                <div class="margin-up-down" v-if="typeStatus != 3">
                    <Select
                        v-model="info.taskLocationId"
                        style="width: 130px"
                        placeholder="采集点"
                        clearable
                    >
                        <Option
                            v-for="item in locationlist"
                            :value="item.id"
                            :key="item.id"
                            style="text-align: center"
                            >{{ item.locationName }}</Option
                        >
                    </Select>
                </div>
                <div class="margin-up-down" v-if="typeStatus == 1">
                    <Select
                        v-model="info.status"
                        style="width: 130px"
                        placeholder="状态"
                        clearable
                    >
                        <Option value="1" style="text-align: center"
                            >待检验</Option
                        >
                        <Option value="4" style="text-align: center"
                            >已出结果</Option
                        >
                    </Select>
                </div>
                <div class="margin-up-down" v-if="typeStatus == 1">
                    <DatePicker
                        type="date"
                        v-model="info.endTime"
                        :options="options"
                        placeholder="请选择完成样本日期"
                        format="yyyy-MM-dd"
                        placement="bottom-end"
                        style="width: 200px"
                        @on-change="time"
                    ></DatePicker>
                </div>
                <div class="margin-up-down">
                    <Input
                        suffix="ios-search"
                        placeholder="封箱编号"
                        style="width: 200px"
                        v-model="info.boxCode"
                        clearable
                    />
                </div>
                <div class="margin-up-down">
                    <Input
                        suffix="ios-search"
                        placeholder="样本编号"
                        style="width: 200px"
                        v-model="info.tubesCode"
                        clearable
                    />
                </div>
                <div class="margin-up-down">
                    <Button
                        type="primary"
                        icon="ios-search"
                        @click="loadPage(1)"
                    ></Button>
                </div>
                <div class="margin-up-down">
                    <Button @click="changeTab(typeStatus)">
                        <i
                            class="iconfont icon-gengxin"
                            style="font-size: 14px; margin-right: 5px"
                        ></i>
                    </Button>
                </div>
                <div
                    style="float: right; margin-top: 10px; margin-left: 10px"
                    v-if="typeStatus == 2"
                >
                    <Button
                        type="primary"
                        icon="ios-cloud-upload-outline"
                        @click="uploadFile(7)"
                        >批量导入核验信息</Button
                    >
                    <!-- <Upload multiple :action="uploadUrlInformation" type="drag" :on-success="handleSuccessInformation" :headers="fromData" class="margin-up-down">
                        <Button type="primary" icon="ios-cloud-upload-outline" @click="uploadFile(7)">批量导入核验信息</Button>
                    </Upload> -->
                </div>
                <div
                    style="float: right; margin-top: 10px"
                    v-if="typeStatus != 3"
                >
                    <Button
                        type="primary"
                        icon="ios-cloud-upload-outline"
                        @click="uploadFile(8)"
                        >批量导入检验结果</Button
                    >
                    <!-- <Upload :action="uploadUrlResult" :on-success="handleSuccess" multiple type="drag" :headers="fromData" class="margin-up-down">
                        <Button type="primary" icon="ios-cloud-upload-outline" @click="uploadFile(8)">批量导入检验结果</Button>
                    </Upload> -->
                </div>
                <div style="clear: both"></div>
            </Col>
        </Row>
        <!-- 表格列表 -->
        <Row
            type="flex"
            justify="space-around"
            class="code-row-bg"
            style="margin-top: 10px"
        >
            <Col span="24">
                <Table stripe :columns="columns" :data="datalist"></Table>
            </Col>
        </Row>
        <!-- 页码 -->
        <div class="page">
            <Page
                :total="count"
                :current="pageNo"
                :page-size="pageSize"
                show-total
                show-elevator
                @on-change="loadPage"
            />
        </div>
        <!-- 核验弹窗 -->
        <Modal
            v-model="ckeckModal"
            title="核验"
            :footer="null"
            :mask-closable="false"
            :width="450"
            styles="padding: none;margin: none"
            class="ckeckModal"
        >
            <div>
                <!-- 控制弹窗右上角x号是否显示 :closable="false" -->
                <Form
                    ref="formInline"
                    :model="form"
                    :rules="formRules"
                    inline
                    :label-width="100"
                >
                    <FormItem label="采集点：">
                        <span>{{ form.taskLocation }}</span>
                    </FormItem>
                    <br />
                    <FormItem label="封箱编号：">
                        <span>{{ form.boxCode }}</span>
                    </FormItem>
                    <br />
                    <FormItem label="样本编号：">
                        <span>{{ form.tubesCode }}</span>
                    </FormItem>
                    <FormItem prop="checkStatus" label="核验结果：">
                        <Select
                            class="w-select"
                            clearable
                            v-model="form.checkStatus"
                            placeholder="请选择核验结果"
                        >
                            <Option value="6" v-show="typeStatus == 2"
                                >核验通过</Option
                            >
                            <Option value="2">样本损坏</Option>
                            <Option value="3">样本缺少</Option>
                            <Option value="4">其他原因，核验失败</Option>
                        </Select>
                    </FormItem>
                    <FormItem label="备注信息：" v-if="form.checkStatus == 4">
                        <Input
                            class="w-input"
                            v-model="form.remark"
                            :maxlength="20"
                            placeholder="请输入30个汉字以内"
                        />
                    </FormItem>
                </Form>
            </div>
            <div slot="footer" class="btn-group" style="text-align: center">
                <Button
                    type="primary"
                    @click="ckecksubmit('formInline')"
                    style="width: 75px; height: 35px"
                    :disabled="disabledckeck"
                >
                    <Icon type="ios-checkmark" style="margin-right: 5px" />确定
                </Button>
                <Button
                    @click="(ckeckModal = false), (form = {})"
                    style="width: 75px; height: 35px"
                >
                    <i
                        class="iconfont icon-butongyi"
                        style="font-size: 14px; margin-right: 5px"
                    ></i
                    >取消
                </Button>
            </div>
        </Modal>
        <!-- 撤销作废弹窗 -->
        <Modal
            v-model="cancelModal"
            title="提示"
            :footer="null"
            :mask-closable="false"
            :width="450"
            styles="padding: none;margin: none"
        >
            <!-- 控制弹窗右上角x号是否显示 :closable="false" -->
            <div class="txtword">
                是否确认要将样本编号
                {{ tubesCode }}
                的样本的作废操作撤回，撤回后样本将回到“待核验”状态？
            </div>
            <div slot="footer" class="btn-group" style="text-align: center">
                <Button
                    type="primary"
                    @click="cancelsubmit"
                    style="width: 75px; height: 35px"
                    :disabled="disabledcancel"
                >
                    <Icon type="ios-checkmark" style="margin-right: 5px" />确定
                </Button>
                <Button
                    @click="cancelModal = false"
                    style="width: 75px; height: 35px"
                >
                    <i
                        class="iconfont icon-butongyi"
                        style="font-size: 14px; margin-right: 5px"
                    ></i
                    >取消
                </Button>
            </div>
        </Modal>
    </div>
</template>

<script>
import api from '@/api/commonApi';
import { DatePicker } from 'view-design';
import Utils from '@/utils';
import code from '@/configs/base.js';
export default {
    components: {
        DatePicker
    },
    data() {
        return {
            errorData: {},
            errorDataInformation: {},
            uploadUrlInformation: api.importCheckInformation,
            uploadUrlResult: api.importCheckResult,
            uploadData: {
                json: '{"urlCode":"' + code.urlCode.hospitalBanner + '"}'
            },
            typeStatus: 2,
            // tab列表
            tabList: [
                {
                    title: '核验通过',
                    value: 1
                },
                {
                    title: '待核验',
                    value: 2
                },
                {
                    title: '作废样本',
                    value: 3
                }
            ],
            info: {
                taskName: null,
                taskId: null,
                taskLocationId: null,
                status: null,
                boxCode: null,
                tubesCode: null,
                endTime: null
            },
            columns: [],
            datalist: [],
            column1: [
                {
                    title: '排序',
                    key: 'iSum',
                    align: 'center',
                    width: 70,
                    render: (h, params) => {
                        let iSum =
                            (this.pageNo - 1) * this.pageSize +
                            params.index +
                            1;
                        return h('span', iSum);
                    }
                },
                {
                    title: '样本编号',
                    key: 'tubesCode',
                    align: 'center'
                },
                {
                    title: '封箱编号',
                    key: 'boxCode',
                    align: 'center'
                },
                {
                    title: '采集点',
                    key: 'locationName',
                    align: 'center'
                    // width: 200
                },
                {
                    title: '采集地点',
                    key: 'address',
                    align: 'center'
                },
                {
                    title: '完成样本时间',
                    key: 'endTime',
                    align: 'center'
                },
                {
                    title: '采集人数（人）',
                    key: 'collectNum',
                    align: 'center'
                },
                {
                    title: '检验结果',
                    key: 'result',
                    align: 'center',
                    render: (h, params) => {
                        let result = '';
                        let tubesStatus = params.row.tubesStatus;
                        if (tubesStatus == 4) {
                            result = params.row.result;
                        } else {
                            result = '-';
                        }
                        return h('span', {
                            domProps: {
                                innerHTML: result
                            }
                        });
                    }
                },
                {
                    title: '样本状态',
                    key: 'tubesStatus',
                    align: 'center',
                    render: (h, params) => {
                        let tubesStatus = params.row.tubesStatus;
                        let tubesStatusName = '';
                        if (tubesStatus == 6) {
                            tubesStatusName = '待检验';
                        } else if (tubesStatus == 4) {
                            tubesStatusName = '已出结果';
                        }
                        return h('span', {
                            domProps: {
                                innerHTML: tubesStatusName
                            }
                        });
                    }
                },
                {
                    title: '设置',
                    key: 'operate',
                    align: 'center',
                    // width: 60,
                    render: (h, params) => {
                        let row = params.row;
                        let tubesStatus = params.row.tubesStatus;
                        this.tubesCode = params.row.tubesCode;
                        return [
                            tubesStatus == 6
                                ? h(
                                      'a',
                                      {
                                          attrs: {
                                              href: 'javascript:void(0);'
                                          },
                                          style: {
                                              color: ' #5362e1',
                                              width: '60px'
                                          },
                                          on: {
                                              click: () => {
                                                  this.ckeckModal = true;
                                                  this.form.taskLocation =
                                                      row.locationName;
                                                  this.form.boxCode =
                                                      row.boxCode;
                                                  this.form.tubesCode =
                                                      row.tubesCode;
                                                  this.form.id = row.tubesId;
                                              }
                                          }
                                      },
                                      '修改核验结果'
                                  )
                                : '-'
                        ];
                    }
                }
            ],
            column2: [
                {
                    title: '排序',
                    key: 'iSum',
                    align: 'center',
                    width: 70,
                    render: (h, params) => {
                        let iSum =
                            (this.pageNo - 1) * this.pageSize +
                            params.index +
                            1;
                        return h('span', iSum);
                    }
                },
                {
                    title: '样本编号',
                    key: 'tubesCode',
                    align: 'center'
                },
                {
                    title: '封箱编号',
                    key: 'boxCode',
                    align: 'center'
                },
                {
                    title: '采集点',
                    key: 'locationName',
                    align: 'center'
                    // width: 200
                },
                {
                    title: '采集地点',
                    key: 'address',
                    align: 'center'
                },
                {
                    title: '完成样本时间',
                    key: 'endTime',
                    align: 'center'
                },
                {
                    title: '采集人数（人）',
                    key: 'collectNum',
                    align: 'center'
                },
                {
                    title: '设置',
                    key: 'operate',
                    align: 'center',
                    width: 80,
                    render: (h, params) => {
                        let row = params.row;
                        let tubesId = params.row.tubesId;
                        this.tubesCode = params.row.tubesCode;
                        return [
                            h(
                                'a',
                                {
                                    attrs: {
                                        href: 'javascript:void(0);'
                                    },
                                    style: {
                                        color: ' #5362e1',
                                        width: '60px'
                                    },
                                    on: {
                                        click: () => {
                                            this.ckeckModal = true;
                                            this.form.taskLocation =
                                                row.locationName;
                                            this.form.boxCode = row.boxCode;
                                            this.form.tubesCode = row.tubesCode;
                                            this.form.id = row.tubesId;
                                        }
                                    }
                                },
                                '核验'
                            )
                        ];
                    }
                }
            ],
            column3: [
                {
                    title: '排序',
                    key: 'iSum',
                    align: 'center',
                    width: 70,
                    render: (h, params) => {
                        let iSum =
                            (this.pageNo - 1) * this.pageSize +
                            params.index +
                            1;
                        return h('span', iSum);
                    }
                },
                {
                    title: '样本编号',
                    key: 'tubesCode',
                    align: 'center'
                },
                {
                    title: '封箱编号',
                    key: 'boxCode',
                    align: 'center'
                },
                {
                    title: '采集点',
                    key: 'locationName',
                    align: 'center'
                    // width: 200
                },
                {
                    title: '采集地点',
                    key: 'address',
                    align: 'center'
                },
                {
                    title: '完成样本时间',
                    key: 'endTime',
                    align: 'center'
                },
                {
                    title: '采集人数（人）',
                    key: 'collectNum',
                    align: 'center'
                },
                {
                    title: '采集点联系人',
                    key: 'contactName',
                    align: 'center'
                },
                {
                    title: '联系电话',
                    key: 'contactPhone',
                    align: 'center'
                },
                {
                    title: '核验结果',
                    key: 'checkResult',
                    align: 'center',
                    // width: 200
                    render: (h, params) => {
                        let checkResult = params.row.checkResult;
                        let remark = params.row.remark;
                        let checkResultName = '';
                        if (checkResult == 2) {
                            checkResultName = '样本损坏';
                        } else if (checkResult == 3) {
                            checkResultName = '样本缺失';
                        } else if (checkResult == 4) {
                            if (remark) {
                                checkResultName = remark;
                            } else {
                                checkResultName = '其他原因，核验失败';
                            }
                        } else if (checkResult == 5) {
                            checkResultName = '医生端作废';
                        }
                        return h('span', {
                            domProps: {
                                innerHTML: checkResultName
                            }
                        });
                    }
                },
                {
                    title: '设置',
                    key: 'operate',
                    align: 'center',
                    width: 80,
                    render: (h, params) => {
                        let row = params.row;
                        let tubesId = params.row.tubesId;
                        return [
                            h(
                                'a',
                                {
                                    attrs: {
                                        href: 'javascript:void(0);'
                                    },
                                    style: {
                                        color: ' #5362e1',
                                        width: '60px'
                                    },
                                    on: {
                                        click: () => {
                                            this.cancelModal = true;
                                            this.id = tubesId;
                                            this.tubesCode = row.tubesCode;
                                        }
                                    }
                                },
                                '撤销作废'
                            )
                        ];
                    }
                }
            ],
            count: 0,
            pageSize: 10,
            pageNo: 1,
            tasklist: [],
            locationlist: [],
            crossApi: api.getCollectTubesAgreeIpage, //核验通过列表api
            invalidApi: api.getNullifyCollectTubesAgreeIpage, //作废样本列表api
            verifiedApi: api.getCollectTubesNoCheckIpage, //待核验列表api
            listApi: api.getCollectTubesNoCheckIpage,
            cancelModal: false,
            ckeckModal: false,
            disabledSave: false,
            tubesCode: '',
            form: {
                taskLocation: '',
                boxCode: '',
                tubesCode: '',
                checkStatus: '',
                remark: '',
                id: ''
            },
            formRules: {
                checkStatus: [
                    {
                        required: true,
                        message: '请选择核验结果',
                        trigger: 'blur'
                    }
                ]
            },
            id: '',
            disabledckeck: false,
            disabledcancel: false
        };
    },
    created() {
        this.typeStatus = this.$route.query.typeStatus
            ? this.$route.query.typeStatus
            : 2;
        this.pageNo = this.$route.query.pageNo ? this.$route.query.pageNo : 1;
    },
    mounted() {
        this.columns = this.column2;
        this.gettasklist();
        this.getlocationlist();
        this.loadPage(1);
    },
    methods: {
        changeTab(item) {
            if (item) {
                this.typeStatus = item;
            }
            if (this.typeStatus == 1) {
                this.columns = this.column1;
                this.listApi = this.crossApi;
            } else if (this.typeStatus == 2) {
                this.columns = this.column2;
                this.listApi = this.verifiedApi;
            } else if (this.typeStatus == 3) {
                this.columns = this.column3;
                this.listApi = this.invalidApi;
            }
            this.info = {
                taskName: null,
                taskId: null,
                taskLocationId: null,
                status: null,
                boxCode: null,
                tubesCode: null,
                endTime: null
            };
            this.loadPage(1);
        },
        //获取任务列表数据
        gettasklist() {
            var params = {};
            params.pageNo = 1;
            params.pageSize = 10000;
            this.$axios
                .post(api.queryTaskList, params)
                .then((resp) => {
                    if (resp.data.success) {
                        if (resp.data.object.records) {
                            this.tasklist = resp.data.object.records;
                        } else {
                            this.tasklist = [];
                        }
                    } else {
                        this.$Message.info('不允许访问');
                    }
                })
                .catch((err) => {
                    console.log(err);
                });
        },
        //获取采集点列表
        getlocationlist() {
            var params = {};
            params.searchStatus = 1;
            params.pageNo = 1;
            params.pageSize = 10000;
            this.$axios
                .post(api.findLocationPage, params)
                .then((resp) => {
                    if (resp.data.success) {
                        if (resp.data.object.records) {
                            this.locationlist = resp.data.object.records;
                        } else {
                            this.locationlist = [];
                        }
                    } else {
                        this.$Message.info('不允许访问');
                    }
                })
                .catch((err) => {
                    console.log(err);
                });
        },
        //加载列表数据
        loadPage(pageNo) {
            this.info.pageNo = pageNo;
            this.pageNo = pageNo;
            this.info.pageSize = this.pageSize;
            this.info.taskId = this.info.taskId ? this.info.taskId : null;
            this.info.taskLocationId = this.info.taskLocationId
                ? this.info.taskLocationId
                : null;
            this.info.status = this.info.status ? this.info.status : null;
            this.info.boxCode = this.info.boxCode ? this.info.boxCode : null;
            this.info.tubesCode = this.info.tubesCode
                ? this.info.tubesCode
                : null;
            this.info.endTime = this.info.endTime
                ? Utils.getNowDateBySpecialFormat(this.info.endTime)
                : null;
            this.$axios
                .post(this.listApi, this.info)
                .then((resp) => {
                    if (resp.data.code == 1) {
                        let ret = resp.data.object;
                        this.count = ret.total;
                        if (ret.records) {
                            this.datalist = ret.records;
                        } else {
                            this.datalist = [];
                            this.count = 0;
                        }
                    } else {
                        this.$Message.error(resp.data.message);
                        this.datalist = [];
                        this.count = 0;
                    }
                })
                .catch((err) => {
                    console.log(err);
                });
        },
        cancelsubmit() {
            this.disabledcancel = true;
            this.$axios
                .post(api.rollbackTubes, { id: this.id })
                .then((resp) => {
                    if (resp.data.success) {
                        this.$Message.success(resp.data.message);
                        this.cancelModal = false;
                        this.disabledcancel = false;
                        this.loadPage(1);
                    } else {
                        this.$Message.error(resp.data.message);
                        this.disabledcancel = false;
                    }
                })
                .catch((err) => {
                    this.$Message.error(resp.data.message);
                    this.disabledcancel = false;
                });
        },
        uploadFile(val) {
            this.functionJS.queryNavgationTo(
                this,
                '/index/nucleicacid/check/one',
                {
                    pageNo: this.pageNo,
                    status: val
                }
            );
        },
        ckecksubmit(name) {
            let result = api.repealTubes;
            if (this.form.checkStatus == 6) {
                result = api.checkTubes;
            } else {
                result = api.repealTubes;
            }
            this.disabledckeck = true;
            this.$refs[name].validate((valid) => {
                if (valid) {
                    this.$axios
                        .post(result, this.form)
                        .then((resp) => {
                            if (resp.data.success) {
                                this.$Message.success(resp.data.message);
                                this.ckeckModal = false;
                                this.disabledckeck = false;
                                this.form = {};
                                this.loadPage(1);
                            } else {
                                this.$Message.error(resp.data.message);
                                this.disabledckeck = false;
                            }
                        })
                        .catch((err) => {
                            this.$Message.error(resp.data.message);
                            this.disabledckeck = false;
                        });
                } else {
                    this.disabledckeck = false;
                    this.$Message.error('请完整填写必填项');
                }
            });
        },
        handleSuccessInformation() {
            console.log(JSON.stringify(res));
            res = this.uploadFileDecrypt(res);
            console.log(res);
            if (res.code == 1) {
                let ret = res.object;
                this.errorDataInformation = ret;
                this.$Message.info('导入成功！');
                /* 移除上传文件列表的删除图标 start */
                let uploadListObj =
                    window.document.getElementsByClassName(
                        'ivu-upload-list'
                    )[0];
                for (let i = 0; i < uploadListObj.children.length; i++) {
                    let liList = uploadListObj.children[i];
                    let removeIcon = liList.children[1];
                    if (removeIcon)
                        removeIcon.parentNode.removeChild(removeIcon);
                }
                /* 移除上传文件列表的删除图标 end */
            } else {
                this.$Message.info('上传失败,请重试');
            }
        },
        handleSuccess(res, file) {
            console.log(JSON.stringify(res));
            res = this.uploadFileDecrypt(res);
            console.log(res);
            if (res.code == 1) {
                let ret = res.object;
                this.errorData = ret;
                this.$Message.info('导入成功！');
                /* 移除上传文件列表的删除图标 start */
                let uploadListObj =
                    window.document.getElementsByClassName(
                        'ivu-upload-list'
                    )[0];
                for (let i = 0; i < uploadListObj.children.length; i++) {
                    let liList = uploadListObj.children[i];
                    let removeIcon = liList.children[1];
                    if (removeIcon)
                        removeIcon.parentNode.removeChild(removeIcon);
                }
                /* 移除上传文件列表的删除图标 end */
            } else {
                this.$Message.info('上传失败,请重试');
            }
        },
        // 下载检验结果模板
        downloadResult() {
            this.$axios
                .post(api.downloadTemplate, {
                    type: 8
                })
                .then((res) => {
                    if (res.data.code) {
                        let ret = res.data;
                        location.href = ret.message;
                    }
                });
        },
        // 下载核验信息模板
        downloadInformation() {
            this.$axios
                .post(api.downloadTemplate, {
                    type: 7
                })
                .then((res) => {
                    if (res.data.code) {
                        let ret = res.data;
                        location.href = ret.message;
                    }
                });
        }
    }
};
</script>

<style lang="less" scoped>
.check {
    width: calc(100%);
    padding: 10px 30px;
    margin: 0 auto;
    background: #fff;
    min-height: 600px;
    .tmpHeader {
        width: 100%;
        height: 40px;
        border-bottom: 2px solid #f2f2f2;
        margin-top: 20px;
        span {
            display: inline-block;
            line-height: 38px;
            padding: 0 15px;
            cursor: pointer;
            border-bottom: 2px solid transparent;
            transition: all 0.5s;
            position: relative;
        }
        span.active {
            color: #5362e1;
            border-bottom: 2px solid #5362e1;
        }
        span:hover {
            border-bottom: 2px solid #5362e1;
            color: #5362e1;
        }
    }
    .margin-up-down {
        display: inline-block;
        margin: 10px 0;
    }
    .cueBox {
        background-color: #fef0f0;
        display: flex;
        padding: 5px 0 5px 15px;
        .icon {
            vertical-align: middle;
            margin-right: 15px;
            img {
                width: 35px;
                height: 35px;
            }
        }
        .cue {
            .s1 {
                color: #f5a300;
                font-weight: bold;
            }
            .s2 {
                color: #e6a057;
                font-size: 10px;
            }
            .download {
                font-size: 10px;
                margin: 20px auto;
                text-align: center;
                cursor: pointer;
                color: #5362e1;
            }
        }
    }
    .page {
        text-align: center;
        margin: 20px 0;
    }
    .btn {
        width: 75px;
        height: 35px;
    }
}
.w-select {
    width: 200px;
}
.ckeckModal {
    /deep/ .ivu-modal-wrap {
        .ivu-modal {
            float: right !important;
            background-color: #fff;
            border-radius: 10px;
            top: 0px;
            height: 100%;
        }
    }
}
</style>